<template>
  <div class="content-box">
    <nav-title title="证明申请审批" :routerLink="routerLink" />
    <!-- 发起人基本信息 -->
    <div class="regulations-box">
      <div class="title">发起人基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">发起人姓名</label>
          <span class="value">{{approveVal.nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人部门</label>
          <span class="value">{{approveVal.rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人岗位</label>
          <span class="value">{{approveVal.jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系电话</label>
          <span class="value">{{approveVal.phone}}</span>
        </p>
      </div>
    </div>
    <!-- 发起人基本信息 -->
    <div class="regulations-box">
      <div class="title">表单信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">证明类型</label>
          <span class="value">{{approveVal.cCertTypeValue}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">开具份数</label>
          <span class="value">{{approveVal.cCertNum}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">证明用途</label>
          <span class="value">{{approveVal.cCertPurpose}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">证明抬头</label>
          <span class="value">{{approveVal.cCertTitle}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">领取方式</label>
          <span class="value">{{approveVal.cCertMethodValue}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">邮寄地址</label>
          <span class="value">{{approveVal.address100}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">备注</label>
          <span class="value">{{approveVal.comments}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">附件</label>
          <span class="value"></span>
        </p>
        <div class="approve-detail">
          <h6>证明开具说明：</h6>
          <p>1、所有证明按实际情况开具，不得随意按个人意愿填写相关数据；</p>
          <p>2、该证明必须用于申请的用途，若用于其他用途，所产生的相应后果由申请人承担；</p>
          <p>3、手机端仅能开具默认证明，若有特殊证明需求，请至电脑端申请并上传附件。</p>
        </div>
      </div>
    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr"></v-flow-charts>
    </div>
    <!-- 审批意见 -->
    <div class="regulations-box">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px"></div>
    <div v-if="approved == '0'">
      <operation-btn @doOperate="doOperate" :cApprovalSw="cApprovalSw" :cDenySw="cDenySw" :cPushbackAllSw="cPushbackAllSw" :cAddSw="cAddSw"></operation-btn>
    </div>
  </div>
</template>
<style type="text/scss" lang="scss">
.grey {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  line-height: 1.5;
  color: grey;
}
@import '../../styles/staff.scss';
</style>

<script>
import { getProve, getCompensateApprove } from '../../api/api'
import { json2Form } from '../../util/http'
import { dateFormat } from 'vux'
import operationBtn from './common/operationBtn'
import vFlowCharts from '../formalStaff/common/flowChart'
export default {
  components: {
    operationBtn,
    vFlowCharts
  },
  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr
    this.approved = this.$route.query.approved
    if (this.$route.query.approved == '0') {
      this.routerLink = 'TodoList'
    } else if (this.$route.query.approved == '1') {
      this.routerLink = 'DoneList'
    } else {
      this.routerLink = 'MyApplication'
    }
    //证明开具
    this.getProves()
  },
  mounted() {

  },
  data() {
    return {
      //返回需要跳转到哪个页面
      routerLink: '',
      //是否从已审批页面跳转过来
      approved: '0',
      approveVal: '',

      //基本信息
      emplid: '', //员工id

      //流程图信息
      cComments: '',
      processList: [],

      //按钮点击的参数
      cWfType: 'CER',
      cTransactionNbr: '',
      cApprovalSw: '',
      cDenySw: '',
      cPushbackAllSw: '',
      cAddSw: ''
    }
  },
  methods: {
    getProves() {
      let params = {
        cTransactionNbr: this.cTransactionNbr
      }
      getProve(params)
        .then(res => {
          if (res && res.retCode === '000000') {
            this.approveVal = res.retData
            this.cApprovalSw = res.retData.cApprovalSw
            this.cDenySw = res.retData.cDenySw
            this.cPushbackAllSw = res.retData.cPushbackAllSw
            this.cAddSw = res.retData.cAddSw
          } else {
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
    },
    doOperate(actionType) {
      let params = {
        c_WF_TYPE: this.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr, //流程编号
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      }

      if (actionType == 'AddStep') {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: 'Visa',
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.cWfType,
            c_COMMENTS: this.cComments
          }
        })
      } else {
        getCompensateApprove(json2Form(params))
          .then(res => {
            if (res && res.retCode === '000000') {
              let _this = this
              this.$vux.alert.show({
                title: '成功',
                content: '操作成功',
                onHide() {
                  _this.$router.push('/TodoList')
                }
              })
            } else {
              this.$vux.alert.show({
                title: '',
                content: res.retMsg
              })
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.approve-detail {
  text-align: left;
  padding: 0 10px;
  color: #999;
  h6 {
    font-weight: bold;
  }
}
</style>
